import { toPercent, formatGMTDate, biColors } from "../../../../assets/js/util.js"
import moudleConfig from "../../../../assets/js/moudleName.js"
import datils from "./datils.vue"
import echarts from 'echarts'
export default {
    data() {
        return {
            // 默认参数 和 URL
            SRC: '',
            DP: {
                p: '',
                f: ''
            },
            // 首行标题
            title: "游戏概况",
            // 货币类型
            currency: "",
            // 时间可以直接选择的范围
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近15天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            // 页面时间框中展示的时间
            date: '',
            // 默认页面选择的是全平台
            navDefault: '0',
            // 标题下部整体数据传入到datils中
            datilsdata: [],
            // datils 的loading
            datilsdataShow: true,
            // 数据图表
            real: {
                color: ['#2eb398', '#9d79d8', '#f9af3f'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10px',
                    data: ['PCU', 'ACU', 'DAU']
                },
                grid: {
                    left: '0%',
                    right: '1%',
                    bottom: '15%',
                    containLabel: true
                },
                toolbox: {
                    right: '20',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    // boundaryGap: false,
                    data: [],
                    axisLabel: {
                        margin: 20,
                    },
                },
                yAxis: {
                    type: 'value',
                    // max: 10000
                },
                dataZoom: [{
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [{
                    name: 'PCU',
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    data: [],
                    symbol: 'circle'
                }, {
                    name: 'ACU',
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    data: [],
                    symbol: 'diamond'
                }, {
                    name: 'DAU',
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    data: [],
                    symbol: 'trangle'
                }]
            },
            // 渠道来源图表
            piereal: {
                color: biColors,
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    top: "40",
                    right: "80",
                    data: []
                },
                series: [{
                    name: "渠道：",
                    type: 'pie',
                    radius: '60%',
                    center: ['30%', '50%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            },
            // PCU/ACU-数据指标说明：
            introduce1: [{
                    title: "PCU",
                    message: "max(1440分钟每分钟的在线去重账号数)"
                },
                {
                    title: "ACU",
                    message: "sum(1440分钟每分钟的在线去重账号数) / 1440"
                }
            ],
            // 图标名字
            chartsName: [{
                    name: "新增情况",
                    link: "javascript:void(0)",
                    className: "realTimeData1",
                    menuName: {
                        name1: "",
                        name2: ""
                    },
                    // 设备激活/激活新增转化率-数据指标说明
                    intro: [{
                            title: "设备激活",
                            message: "首次启动游戏的设备数（按历史取所有设备的最早启动时间）"
                        },
                        {
                            title: "激活新增转化率",
                            message: "首次登录游戏的设备数（按历史取所有设备的最早登录时间）/首次启动游戏的设备数（按历史取所有设备的最早启动时间）"
                        }
                    ]
                },
                {
                    name: "活跃情况",
                    link: "/main/playerAnalysis/playactive",
                    className: "realTimeData2",
                    menuName: {
                        name1: "",
                        name2: ""
                    },
                    // DAU-新增玩家/DAU-老玩家-数据指标说明
                    intro: [{
                            title: "DAU-新增玩家",
                            message: "首次登录游戏的账号数（按历史取所有账号的最早登录时间）"
                        },
                        {
                            title: "DAU-老玩家",
                            message: "时间粒度内登录游戏的去重账号数-首次登录游戏的账号数（按历史取所有账号的最早登录时间）"
                        }
                    ],
                },
                {
                    name: "留存情况",
                    link: "/main/playerAnalysis/playkeep",
                    className: "realTimeData3",
                    menuName: {
                        name1: "账号维度",
                        name2: "设备维度"
                    },
                    // 账号维度/设备维度-数据指标说明
                    intro: [{
                            title: "账号维度-次日留存率",
                            message: "当日新增账号在次日登录游戏的账号占当日新增账号的比例"
                        },
                        {
                            title: "账号维度-3日留存率",
                            message: "当日新增账号在第3日（含新增当日）登录游戏的账号占当日新增账号的比例"
                        },
                        {
                            title: "账号维度-7日留存率",
                            message: "当日新增账号在第7日（含新增当日）登录游戏的账号占当日新增账号的比例"
                        },
                        {
                            title: "设备维度-次日留存率",
                            message: "当日新增设备在次日登录游戏的设备占当日新增设备的比例"
                        },
                        {
                            title: "设备维度-3日留存率",
                            message: "当日新增设备在第3日（含新增当日）登录游戏的设备占当日新增设备的比例"
                        },
                        {
                            title: "设备维度-7日留存率",
                            message: "当日新增设备在第7日（含新增当日）登录游戏的设备占当日新增设备的比例"
                        }
                    ],
                },
                {
                    name: "收入情况",
                    link: "javascript:void(0)",
                    className: "realTimeData4",
                    menuName: {
                        name1: "收入",
                        name2: "付费率"
                    },
                    // 收入/活跃付费率/付费玩家/ARPPU/ARPU-数据指标说明
                    intro: [{
                            title: "收入",
                            message: "时间粒度内的付费总额（RMB） "
                        },
                        {
                            title: "活跃付费率",
                            message: "时间粒度内的去重付费账号数/时间粒度内登录游戏的去重账号数"
                        },
                        {
                            title: "付费玩家",
                            message: "时间粒度内的去重付费账号数"
                        },
                        {
                            title: "ARPPU",
                            message: "时间粒度内的付费总额（RMB）/时间粒度内的去重付费账号数"
                        },
                        {
                            title: "ARPU",
                            message: "时间粒度内的付费总额（RMB）/时间粒度内登录游戏的去重账号数"
                        }
                    ],
                },
                {
                    name: "游戏时长(m)",
                    link: "javascript:void(0)",
                    className: "realTimeData5",
                    menuName: {
                        name1: "",
                        name2: ""
                    },
                    // 活跃账号人均在线时长/活跃账号人均登录次数-数据指标说明
                    intro: [{
                            title: "活跃账号人均在线时长",
                            message: "时间粒度内账号的在线时长 / 活跃账号数 "
                        },
                        {
                            title: "活跃账号人均登录次数",
                            message: "活跃账号登录次数总和 / 活跃账号数"
                        }
                    ],
                },
                {
                    name: "渠道来源",
                    link: "javascript:void(0)",
                    className: "realTimeData6",
                    menuName: {
                        name1: "设备激活",
                        name2: "新增玩家"
                    },
                    // 设备激活/新增玩家-数据指标说明
                    intro: [{
                            title: "设备激活",
                            message: "首次启动游戏的设备数（按历史取所有设备的最早启动时间） "
                        },
                        {
                            title: "新增玩家",
                            message: "首次登录游戏的账号数（按历史取所有账号的最早登录时间）"
                        }
                    ]
                }
            ],
            introduceTitle: [
                "设备激活/激活新增转化率",
                "DAU-新增玩家/DAU-老玩家",
                "账号维度/设备维度",
                "收入/活跃付费率/付费玩家/ARPPU/ARPU",
                "活跃账号人均在线时长/活跃账号人均登录次数",
                "设备激活/新增玩家"
            ],
            // 留存情况默认选择的菜单是账号维度
            menuDefault: ["0-1", "1-1", "2-1", "3-1", "4-1", "5-1"],
            // pcu/acu loading
            pcuAcuLoading: true,
            // 留存情况数据拷贝
            remainDataCp: [],
            // 收入情况数据拷贝
            payDataCp: [],
            // 渠道情况数据
            channelDataCp: [],
            // 请求的参数
            postObj: {
                'dstart': '',
                'dend': ''
            },
            //所有数据
            allData: {}
        }
    },
    methods: {
        // 通用时间排序
        sortDate(arr) {
            arr.sort(function(a, b) {
                a = new Date(a.replace(/\-/g, "/"));
                b = new Date(b.replace(/\-/g, "/"));
                return a > b ? 1 : -1; // 这里改为大于号  
            });
            return arr;
        },
        // 通用 成功 与 失败
        successFun(data) {
            this.$message({
                message: data,
                type: "success"
            });
        },
        errorFun(data) {
            this.$message.error(data);
        },
        // 提示消息框
        messageBox(data) {
            this.$notify.info({
                title: '消息',
                message: data
            });
        },
        //初始化
        _init() {
            var elArr = ["realTimeData", "realTimeData1", "realTimeData2", "realTimeData3", "realTimeData4", "realTimeData5", "realTimeData6"];
            for (var j = 0; j < elArr.length; j++) {
                this[elArr[j] + 'Charts'] = echarts.init(document.getElementById(elArr[j]));
                if (j === 6) {
                    this[elArr[j] + 'Charts'].setOption(this.piereal);
                } else {
                    this[elArr[j] + 'Charts'].setOption(this.real);
                }
            }
            var arr = ["realTimeDataCharts", "realTimeData1Charts", "realTimeData2Charts", "realTimeData3Charts", "realTimeData4Charts", "realTimeData5Charts", "realTimeData6Charts"];
            window.addEventListener('resize', function() {
                for (var i = 0; i < arr.length; i++) {
                    this[arr[i]].resize();
                }
            }.bind(this))
        },
        // 时间改变 得到起始时间和结束时间
        dateChange(val) {
            if (!val) {
                this.errorFun('请选择查看时间！')
            } else {
                var t = val.split(' - ')
                this.postObj.dstart = t[0];
                this.postObj.dend = t[1];
                if (t[0] > t[1]) {
                    this.errorFun('开始日期不能大于结束日期，请您重新选择日期！')
                } else {
                    if (this.remainDataCp.length > 0) {
                        this.getData(this.postObj);
                    }
                }
            }
        },
        /**
         * 通用 成功 与 失败
         */
        // 成功
        successFun(data) {
            this.$message({
                message: data,
                type: 'success'
            });
        },
        // 失败
        errorFun(data) {
            this.$message.error(data);
        },
        // 选择游戏的平台
        handleSelect(key, keyPath) {
            this.platformConfig(this.allData[key]);
        },
        // 详情标签点击跳转
        introClick(keyPath) {
            if (keyPath === "javascript:void(0)") {
                this.messageBox("该页面暂无二级页面！！");
                return;
            }
            var arr = [];
            var arrChild = [];
            // 获取分组的Id
            for (var i in moudleConfig) {
                for (var j in moudleConfig[i].pages) {
                    if (moudleConfig[i].pages[j].index === keyPath) {
                        arrChild.push(i);
                    }
                }
            }
            arrChild.push(keyPath)
            arr.push(keyPath, arrChild);
            this.$emit('activemenu', arr);
        },
        //每个图标包含的菜单，通过key来确定是哪个菜单
        handle(key) {
            var index = key.split("-")[0];
            this.menuDefault[index] = key;
            if (index === "2") {
                this.remainConfig(this.remainDataCp, key);
            } else if (index === "3") {
                this.payConfig(this.payDataCp, key);
            } else if (index === '5') {
                this.channelSourceConfig(this.channelDataCp, key);
            }
        },
        // 所有图表样式改变
        echartsData() {},
        // 汇总数据请求回来数据进行整理
        datilsdataConfig(obj) {
            // 将数组转换格式渲染
            var siblings = function(data) {
                var arr = [];
                for (var i = 0; i < data.length; i++) {
                    var obj = {};
                    if (i % 2 == 0) {
                        obj.name = data[i].name;
                        obj.value = data[i].value;
                        arr.push(obj)
                    } else {
                        arr[i - ((i + 1) / 2)].sib = {
                            name: data[i].name,
                            value: data[i].value
                        }
                    }
                }
                return arr;
            }
            var arr = [
                { name: "设备激活", value: "", key: "deviceActive" },
                { name: "累计设备激活", value: "10527117", key: "totalDeviceActive" },
                { name: "新增玩家", value: "", key: "newAddPlayer" },
                { name: "累计新增玩家", value: "", key: "totalNewAddPlayer" },
                { name: "活跃玩家", value: "", key: "activePlayer" },
                { name: "累计活跃玩家", value: "", key: "totalActivePlayer" },
                { name: "付费玩家", value: "", key: "payPlayer" },
                { name: "累计付费玩家", value: "", key: "totalPayPlayer" },
                { name: "付费金额（" + this.currency + "）", value: "", key: "payAmount" },
                { name: "累计付费金额（" + this.currency + "）", value: "", key: "totalPayAmount" }
            ];
            for (var i = 0; i < arr.length; i++) {
                for (var j in obj) {
                    if (arr[i].key === j) {
                        arr[i].value = obj[j];
                    }
                }
            }
            this.datilsdata = siblings(arr);
            this.datilsdataShow = false;
        },
        // pcu/acu请求回来数据进行整理
        pcuAcuConfig(arr) {
            if (arr === undefined) {
                arr = [];
            }
            var acuArr = [],
                pcuArr = [],
                dateArr = [],
                dauArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    if (j === "acu") {
                        acuArr.push(arr[i][j]);
                    } else if (j === "pcu") {
                        pcuArr.push(arr[i][j]);
                    } else if (j === "dau") {
                        dauArr.push(arr[i][j]);
                    } else {
                        dateArr.push(arr[i][j]);
                    }
                }
            }
            this.realTimeDataCharts.setOption({
                xAxis: {
                    data: dateArr
                },
                series: [{ data: pcuArr }, { data: acuArr }, { data: dauArr }]
            })
            this.pcuAcuLoading = false;
        },
        // 新增概况请求回来的数据进行整理
        newAddConfig(arr) {
            if (arr === undefined) {
                arr = [];
            }
            var activeArr = [],
                deviceArr = [],
                dateArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    if (j === "activeAddRadio") {
                        activeArr.push(arr[i][j]);
                    } else if (j === "deviceActive") {
                        deviceArr.push(arr[i][j]);
                    } else {
                        dateArr.push(arr[i][j]);
                    }
                }
            }
            // 新增情况图表
            this.realTimeData1Charts.setOption({
                legend: {
                    data: ['设备激活', '激活新增转化率']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            if (a[i].seriesName.indexOf("转化率") < 0) {
                                var str = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + "#a99ce4" + '"></span>';
                                temp = str + temp + a[i].seriesName + '：' + a[i].value + '</br>';
                            } else {
                                var str = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + a[i].color + '"></span>';
                                temp = temp + str + a[i].seriesName + '：' + Number(a[i].value * 100).toFixed(2) + '%' + '</br>';
                            }
                        }
                        return "日期：" + a[0].name + '</br>' + temp;
                    }
                },
                toolbox: {
                    show: false
                },
                yAxis: [{
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: function(value) {
                                value = value / 1000;
                                return value + "k";
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#9d79d8'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '占比(%)',
                        splitLine: { show: false },
                        axisLabel: {
                            formatter: function(value) {
                                if (typeof(value) == "number") {
                                    var str = (value * 100).toFixed(0);
                                } else {
                                    var str = Number(value * 100).toFixed(0)
                                }
                                str += "%";
                                return str;
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#2eb398'
                            }
                        }
                    }
                ],
                xAxis: {
                    data: dateArr
                },
                series: [{
                    name: '设备激活',
                    type: 'bar',
                    barMaxWidth: '30',
                    yAxisIndex: 0,
                    data: deviceArr,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [
                                    { offset: 0, color: '#b8cff1' },
                                    { offset: 0.5, color: '#a99ce4' },
                                    { offset: 1, color: '#a07cdc' }
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [
                                    { offset: 0, color: '#a07cdc' },
                                    { offset: 0.7, color: '#a99ce4' },
                                    { offset: 1, color: '#b8cff1' }
                                ]
                            )
                        }
                    }
                }, {
                    name: '激活新增转化率',
                    type: 'line',
                    data: activeArr,
                    yAxisIndex: 1,
                    symbol: 'circle'
                }]
            })
        },
        // 活跃情况请求回来的数据进行整理
        activeConfig(arr) {
            if (arr === undefined) {
                arr = [];
            }
            var newAcuArr = [],
                oldAcuArr = [],
                allAcuArr = [],
                dateArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    if (j === "newAcu") {
                        newAcuArr.push(arr[i][j]);
                    } else if (j === "oldAcu") {
                        oldAcuArr.push(arr[i][j]);
                    } else if (j === "allAcu") {
                        allAcuArr.push(arr[i][j]);
                    } else {
                        dateArr.push(arr[i][j]);
                    }
                }
            }
            // 活跃情况图表
            this.realTimeData2Charts.setOption({
                legend: {
                    data: ['DAU-新增玩家', 'DAU-老玩家', "ALLACU-全部玩家"]
                },
                toolbox: {
                    show: false
                },
                yAxis: [{
                    type: 'value',
                    name: '数量',
                    axisLabel: {
                        formatter: function(value) {
                            value = value / 1000;
                            return value + "k";
                        }
                    }
                }],
                xAxis: {
                    data: dateArr
                },
                series: [{
                    name: 'DAU-新增玩家',
                    type: 'line',
                    barMaxWidth: '30',
                    sampling: 'average',
                    data: newAcuArr,
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 131)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },

                }, {
                    name: 'DAU-老玩家',
                    type: 'line',
                    data: oldAcuArr,
                    itemStyle: {
                        normal: {
                            color: "#a07cdc"
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#b8cff1'
                            }, {
                                offset: 1,
                                color: '#a07cdc'
                            }])
                        }
                    },

                    symbol: 'circle'
                }, {
                    name: "ALLACU-全部玩家",
                    type: 'line',
                    data: allAcuArr,
                    itemStyle: {
                        normal: {
                            color: "#2eb398"
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#2eb398"
                            }, {
                                offset: 1,
                                color: "#6afbaa"
                            }])
                        }
                    },

                    symbol: 'trangle'
                }]
            })
        },
        // 留存情况请求回来的数据进行整理
        remainConfig(arr, key) {
            if (arr === undefined) {
                arr = [];
            }
            var device2Arr = [],
                device3Arr = [],
                device7Arr = [],
                user2Arr = [],
                user3Arr = [],
                user7Arr = [],
                dateArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    switch (j) {
                        case "device2Remain":
                            device2Arr.push(arr[i][j]);
                            break;
                        case "device3Remain":
                            device3Arr.push(arr[i][j]);
                            break;
                        case "device7Remain":
                            device7Arr.push(arr[i][j]);
                            break;
                        case "user2Remain":
                            user2Arr.push(arr[i][j]);
                            break;
                        case "user3Remain":
                            user3Arr.push(arr[i][j]);
                            break;
                        case "user7Remain":
                            user7Arr.push(arr[i][j]);
                            break;
                        default:
                            dateArr.push(arr[i][j]);
                            break;
                    }
                }
            }
            var dateTime = +new Date(dateArr[dateArr.length - 1]);
            var dateStr = formatGMTDate(+new Date(), true);
            if (dateTime === new Date(dateStr).getTime() - 86400000) {
                dateArr.pop();
            }
            // 留存情况图表
            this.realTimeData3Charts.setOption({
                legend: {
                    data: ['2日留存', '3日留存', '7日留存']
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            var str = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + a[i].color + '"></span>';
                            temp = temp + str + a[i].seriesName + '：' + Number(a[i].value * 100).toFixed(2) + '%' + '</br>';
                        }
                        return "日期：" + a[0].name + '</br>' + temp;
                    }
                },
                toolbox: {
                    show: false
                },
                yAxis: [{
                    type: 'value',
                    splitLine: { show: false },
                    axisLabel: {
                        formatter: function(value) {
                            if (typeof(value) == "number") {
                                var str = (value * 100).toFixed(0);
                            } else {
                                var str = Number(value * 100).toFixed(0)
                            }
                            str += "%";
                            return str;
                        }
                    }
                }],
                xAxis: {
                    data: dateArr
                },
                series: [{
                    name: '2日留存',
                    type: 'line',
                    data: key !== "2-1" ? device2Arr : user2Arr,
                    symbol: 'roundRect'
                }, {
                    name: '3日留存',
                    type: 'line',
                    data: key !== "2-1" ? device3Arr : user3Arr,
                    symbol: 'circle'
                }, {
                    name: '7日留存',
                    type: 'line',
                    data: key !== "2-1" ? device7Arr : user7Arr,
                    symbol: 'circle',
                    smooth: true
                }]
            })
        },
        // 收入情况请求回来的数据进行整理
        payConfig(arr, key) {
            if (arr === undefined) {
                arr = [];
            }
            var aRPPUArr = [],
                aRPUArr = [],
                activePayRadioArr = [],
                dateArr = [],
                payAmountArr = [],
                payPlayerArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    switch (j) {
                        case "aRPPU":
                            aRPPUArr.push(arr[i][j]);
                            break;
                        case "aRPU":
                            aRPUArr.push(arr[i][j]);
                            break;
                        case "activePayRadio":
                            activePayRadioArr.push(arr[i][j]);
                            break;
                        case "payAmount":
                            payAmountArr.push(arr[i][j]);
                            break;
                        case "payPlayer":
                            payPlayerArr.push(arr[i][j]);
                            break;
                        default:
                            dateArr.push(arr[i][j]);
                            break;
                    }
                }
            }
            // 将 小数保留 俩位， 是否加% 如果第二个参数为true就是百分数
            function toPercentConfig(arr) {
                // 变为保留2位数据
                for (var n = 0; n < arr.length; n++) {
                    arr[n] = Number(arr[n]).toFixed(2);
                }
                return arr;
            }
            if (key === "3-1") {
                var legendArr = ['收入', '付费玩家'];
                var seriesArr = [{
                    name: '收入',
                    type: 'bar',
                    barMaxWidth: '30',
                    yAxisIndex: 0,
                    data: key === "3-1" ? payAmountArr : activePayRadioArr,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ]
                            )
                        }
                    }
                }, {
                    name: '付费玩家',
                    type: 'line',
                    data: key === "3-1" ? payPlayerArr : aRPPUArr,
                    yAxisIndex: 1,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: '#2eb398',
                            lineStyle: {
                                color: '#2eb398'
                            }
                        }
                    },
                    smooth: true
                }];
                var yAxisArr = [{
                        type: 'value',
                        axisLabel: {
                            formatter: function(value) {
                                value = value / 1000;
                                return value + "k";
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#188df0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#2eb398'
                            }
                        },
                    }
                ];
                var tooltipArr = {
                    trigger: 'axis'
                }
            } else {
                var legendArr = ['活跃付费率', 'ARPPU', 'ARPU'];
                var seriesArr = [{
                        barMaxWidth: '30',
                        name: '活跃付费率',
                        type: 'bar',
                        data: activePayRadioArr,
                        yAxisIndex: 0,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, [
                                        { offset: 0, color: '#83bff6' },
                                        { offset: 0.5, color: '#188df0' },
                                        { offset: 1, color: '#188df0' }
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ]
                                )
                            }
                        }
                    },
                    {
                        name: 'ARPPU',
                        type: 'line',
                        data: toPercentConfig(aRPPUArr),
                        yAxisIndex: 1,
                        symbol: 'circle',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: '#2eb398',
                                lineStyle: {
                                    color: '#2eb398'
                                }
                            }
                        },
                    },
                    {
                        name: 'ARPU',
                        type: 'line',
                        data: toPercentConfig(aRPUArr),
                        yAxisIndex: 1,
                        symbol: 'circle',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: '#9d79d8',
                                lineStyle: {
                                    color: '#9d79d8'
                                }
                            }
                        },
                    }
                ];
                var yAxisArr = [{
                        type: 'value',
                        axisLabel: {
                            formatter: function(value) {
                                value = Number(value * 100).toFixed(0);
                                return value + "%";
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#188df0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#2eb398'
                            }
                        }
                    }
                ];
                var tooltipArr = {
                    trigger: 'axis',
                    formatter: function(a) {
                        var temp = '';
                        for (var i = 0, len = a.length; i < len; i++) {
                            if (a[i].seriesName.indexOf("率") < 0) {
                                var str = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + a[i].color + '"></span>';
                                temp = temp + str + a[i].seriesName + '：' + a[i].value + '</br>';
                            } else {
                                var str = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + '#188df0' + '"></span>';
                                temp = str + temp + a[i].seriesName + '：' + Number(a[i].value * 100).toFixed(2) + '%' + '</br>';
                            }
                        }
                        return "日期：" + a[0].name + '</br>' + temp;
                    }
                }
            }
            // 收入情况图表
            this.realTimeData4Charts.setOption({
                legend: {
                    data: legendArr
                },
                tooltip: tooltipArr,
                toolbox: {
                    show: false
                },
                xAxis: {
                    data: dateArr
                },
                yAxis: yAxisArr,
                series: seriesArr
            }, true)
        },
        // 游戏时长请求回来的数据进行整理
        durationConfig(arr) {
            if (arr === undefined) {
                arr = [];
            }
            var averageDurationArr = [],
                averageLoginArr = [],
                dateArr = [];
            for (var i = 0; i < arr.length; i++) {
                for (var j in arr[i]) {
                    if (j === "averageDuration") {
                        var num = Number(arr[i][j] / 60).toFixed(2);
                        averageDurationArr.push(num);
                    } else if (j === "averageLogin") {
                        averageLoginArr.push(arr[i][j]);
                    } else {
                        dateArr.push(arr[i][j]);
                    }
                }
            }
            // 游戏时长(m)情况图表
            this.realTimeData5Charts.setOption({
                legend: {
                    data: ['人均在线时长(m)', '人均登录次数']
                },
                tooltip: {
                    trigger: 'axis',
                },
                toolbox: {
                    show: false
                },
                xAxis: {
                    data: dateArr
                },
                yAxis: [{
                        type: 'value',
                        name: '时长',
                        axisLine: {
                            lineStyle: {
                                color: '#2eb398'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '次数',
                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#d14a61'
                            }
                        }
                    }
                ],
                series: [{
                    name: '人均在线时长(m)',
                    type: 'bar',
                    barMaxWidth: '30',
                    yAxisIndex: 0,
                    data: averageDurationArr,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#66cf97" },
                                { offset: 0.5, color: "#4eb59a" },
                                { offset: 1, color: "#349b98" }
                            ])
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#4eb59a" },
                                { offset: 0.7, color: "#349b98" },
                                { offset: 1, color: "#66cf97" }
                            ])
                        }
                    }
                }, {
                    name: '人均登录次数',
                    type: 'line',
                    data: averageLoginArr,
                    yAxisIndex: 1,
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: '#d14a61'
                        }
                    }
                }]
            })
        },
        // 渠道来源求回来的数据进行整理
        channelSourceConfig(obj, key) {
            if (obj === undefined) {
                obj = {
                    deviceActive: [],
                    newAddPlayer: []
                };
            }
            var deviceActiveLegendArr = [],
                deviceActiveSeriesArr = [],
                newAddPlayerLegendArr = [],
                newAddPlayerSeriesArr = [];
            var deviceActive = obj.deviceActive;
            var newAddPlayer = obj.newAddPlayer;
            for (var j in deviceActive) {
                var obj = {
                    value: '',
                    name: ''
                };
                deviceActiveLegendArr.push(j);
                obj.value = deviceActive[j];
                obj.name = j;
                deviceActiveSeriesArr.push(obj);
            }
            for (var m in newAddPlayer) {
                var obj = {
                    value: '',
                    name: ''
                };
                newAddPlayerLegendArr.push(m);
                obj.value = newAddPlayer[m];
                obj.name = m;
                newAddPlayerSeriesArr.push(obj);
            }
            this.realTimeData6Charts.setOption({
                legend: {
                    type: 'scroll',
                    data: key === '5-1' ? deviceActiveLegendArr : newAddPlayerLegendArr
                },
                series: [{
                    data: key === '5-1' ? deviceActiveSeriesArr : newAddPlayerSeriesArr
                }]
            })
        },
        // 平台切换的数据配置
        platformConfig(data) {
            var that = this;
            // 整体数据配置
            that.datilsdataConfig(data.entityBanner);
            // 整理PCU、ACU数据
            that.pcuAcuConfig(data.onlineList);
            //新增概况数据
            that.newAddConfig(data.newAddList);
            // 活跃情况数据
            that.activeConfig(data.activeList);
            // 留存情况数据
            that.remainDataCp = data.remainList;
            that.remainConfig(data.remainList, that.menuDefault[2]);
            //收入情况数据
            that.payDataCp = data.payList;
            that.payConfig(data.payList, that.menuDefault[3]);
            //游戏时长数据
            that.durationConfig(data.durationList);
            // 渠道来源数据
            that.channelDataCp = data.channelSource;
            that.channelSourceConfig(data.channelSource, that.menuDefault[5]);
        },
        // 获取数据
        getData() {
            this.datilsdata = [];
            this.datilsdataShow = true;
            this.pcuAcuLoading = true;
            var that = this;
            var p = new Promise(function(resolve, reject) {
                that.$http.jsonp(
                    `${that.SRC}data/get.do?p=${that.DP.p}&f=${that.DP.f}&a=search`, {
                        params: {
                            'ps': `dstart=${that.postObj.dstart}&dend=${that.postObj.dend}`
                        }
                    }
                ).then(function(res) {
                    resolve(res.body)
                })
            })
            p.then(function(value) {
                var data = JSON.parse(value)
                data = JSON.parse(data.replace(/\"\{\"/g, '\{\"').replace(/\"\}\"/g, '\"\}'));
                if (data["0"].res === "0") {
                    that.allData = data;
                    that.platformConfig(that.allData[that.navDefault]);
                } else {
                    that.errorFun("数据请求失败！！")
                }
            })
        }
    },
    components: {
        "v-datils": datils
    },
    mounted() {
        // 初始化URL
        this.SRC = this.$store.getters.src;
        this.DP.p = localStorage.getItem('ZULONGBIPROJECTID');
        this.DP.f = localStorage.getItem('ZULONGBIPAGEID');
        // 获取货币类型
        this.currency = localStorage.getItem('ZULONGBICURRENCY');
        this.date = [new Date(new Date().getTime() - 7 * 86400000), new Date(new Date().getTime() - 86400000)];

        this.postObj.dend = formatGMTDate(new Date().getTime() - 86400000, true);
        this.postObj.dstart = formatGMTDate(new Date().getTime() - (86400000 * 8), true);

        this.getData();

        this._init();

        this.echartsData();
    }
}